<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="vertical"
    background-color="#e5f8ff"
    text-color="#000"
    active-text-color="#00bfff"
    unique-opened
    router
    style="height: 100vh"
    @select="handleMenuSelect"
  >
    <template v-for="item in routerList" :key="item.id">
      <el-sub-menu v-if="item.router_type === 0" :index="item.path">
        <template #title>{{ item.name }}</template>
        <!-- 修改：子菜单路径使用绝对路径（直接取 child.path） -->
        <el-menu-item
          v-for="child in item.children"
          :key="child.id"
          :index="child.path.replace(/\/+/g, '/')"
        >
          {{ child.name }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { useRoutesStore } from "@/stores";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { Route } from "@/router/type"; // 新增类型导入

const routesStore = useRoutesStore();
const router = useRouter();
const route = useRoute(); // 新增：获取当前路由
const routerList = ref<Route[]>([]); // 明确类型并初始化空数组
routerList.value = routesStore.getRoutes;
const activeIndex = ref(route.path); // 初始化为当前路由路径

const handleMenuSelect = (index: string) => {
  activeIndex.value = index;
  router.push(index).catch((err) => {
    console.log("Navigation error:", err);
  });
};
</script>
